<template>
  <div class="personalSetting_container pr-1 pl-1">
		<div class="personalSetting_container_item br-16 pl-1 pr-1 pt-0 pb-0 mb-0" v-for="(item , index) in settingList" :key="index" @click="goPersonalSettingSwitch(item.id)">
			<div class="item_left">
				<img :src="item.icon" alt="" class="mr-0">
				<span>{{ item.name }}</span>
			</div>
			<div class="item_right">
				<span v-if="!!item.value">{{ item.value }}</span>
				<img src="@/image/aiQuantization/indexTop/arrow.png" class="ml-0" alt="" v-if="item.showArrow">
			</div>
		</div>
		<van-popup v-model="bottomPopShow" position="bottom" >
			<van-picker
				:title="$t('选择语言')"
				show-toolbar
				:columns="columns"
				@confirm="onConfirm"
				@cancel="onCancel"
			/>
		</van-popup>
	</div>
</template>

<script>
import { getUserInfo } from "@/request/personalCenter";
import { langList } from "@/utils/index";
import AuthUtils from '@/utils/auth';
import { set } from 'vue';
import { setLanguage } from '@/lang';
export default {
	name: 'PersonalSetting',
	data(){
		return{
			settingList:[
				{
					id:1,
					name: this.$t('币种'),
					icon: require('@/image/personalCenter/systemSettings/user_icon11.png'),
					value: 'USD',
					showArrow: true
				},
				{
					id:2,
					name: this.$t('语言'),
					icon: require('@/image/personalCenter/systemSettings/user_icon6.png'),
					value: '简体中文',
					showArrow: true
				},
				{
					id:3,
					name: this.$t('支付密码'),
					icon: require('@/image/personalCenter/systemSettings/user_icon7.png'),
					value: '',
					showArrow: true
				},
				{
					id:4,
					name: this.$t('身份验证器'),
					icon: require('@/image/personalCenter/systemSettings/user_icon10.png'),
					value: '',
					showArrow: true
				},
				{
					id:5,
					name: this.$t('客户服务'),
					icon: require('@/image/global/customer_service_icon.png'),
					value: '',
					showArrow: false
				},
				{
					id:6,
					name: this.$t('退出登录'),
					icon: require('@/image/personalCenter/systemSettings/user_icon12.png'),
					value: '',
					showArrow: false
				},
			],
			bottomPopShow: false,
			columns:[],
		}
	},
	mounted(){
		setTimeout(() => {
			this.columns = langList.map(item=>item.title)
		}, 1000);
		this.getSystemSettingInfo()
		this.changeLanguage()
	},
	methods:{
		changeLanguage(){
			let a = this.$i18n.locale
			this.settingList[1].value = langList.filter(item=> item.value === a)[0]?.title
			getUserInfo({}).then(res=>{
				if(res.code == 1){
					this.settingList[0].value = res.data.country_code
				}else{
					console.log(res.msg)
				}
			})
		},
		getSystemSettingInfo(){
			// 获取系统设置信息
			this.disposeList()
		},
		disposeList(){
			// 处理列表数据

		},
		goPersonalSettingSwitch(id){
			// 根据传递类型去跳转中转页面
			if(id == 2){
				this.bottomPopShow = true
				return
			}else if(id == 5){
				// 客户服务
				window.open(process.env.VUE_APP_HELP_URL, '_blank');
				return
			}
			else if(id == 6){
				AuthUtils.logout();
				return
			}
			if(this.$route.name != 'PersonalSettingSwitch'){
				sessionStorage.setItem('personalSystemSetting', id) // 认证类型
				// sessionStorage.setItem('personalSettingName', 1) // 用户id
				this.$router.push({
					name: 'PersonalSettingSwitch',
					params:{
						// id: 1, // 传递用户id
						type: id, // 认证类型
					}
				})
			}
		},
		onConfirm(value, index) {
			let arr = langList.filter(item=>item.title === value)
			if(arr.length > 0){
				setLanguage(arr[0].value)
				window.location.reload()
				this.changeLanguage()
				this.bottomPopShow = false
			}
		},
		onCancel() {
			this.bottomPopShow = false;
		},
	},
	watch:{
		$route(to, from){
			if(from.name == 'PersonalSettingSwitch'){
				this.getSystemSettingInfo()
			}
		}
	}
}
</script>

<style>

</style>